<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
import EmployeeSelectPanel from '../employee/EmployeeSelectPanel.vue'
import type { EmployeeApi } from '@/apis'
import { RoleApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useConfirm, useTable } from '@/hooks'
import { useUserStore } from '@/stores'
import getAvatar from '@/utils/avatar'

const props = defineProps<{
  role?: RoleApi.RoleResp
}>()

const userStore = useUserStore()

const queryForm = reactive<RoleApi.RoleEmployeeQuery>({
  roleId: '',
})

const {
  tableData: dataList,
  loading,
  pagination,
  search,
} = useTable(page => RoleApi.getRoleEmployeePage({ ...queryForm, ...page }), { immediate: false })

const columns: TableInstanceColumns[] = [
  {
    title: '姓名',
    slotName: 'name',
    width: 120,
    ellipsis: true,
    tooltip: true,
    fixed: 'left',
  },
  { title: '手机号', dataIndex: 'mobilePhone', width: 140, ellipsis: true, tooltip: true },
  { title: '性别', slotName: 'gender', align: 'center', width: 100 },
  { title: '所属部门', dataIndex: 'orgName', ellipsis: true, tooltip: true, width: 180 },
  { title: '状态', slotName: 'status', align: 'center', width: 80 },
  {
    title: '操作',
    slotName: 'action',
    width: 100,
    align: 'center',
    fixed: 'right',
    show: userStore.hasPermission(['system:user:write']),
  },
]

// 选择员工
const EmployeeSelectPanelRef = ref<InstanceType<typeof EmployeeSelectPanel>>()
const onSelectEmployee = () => {
  EmployeeSelectPanelRef.value?.open()
}

// 添加员工
const onAddEmployee = (employeeIds) => {
  const data = {
    roleId: props.role!.id,
    employeeId: employeeIds[0],
  }
  RoleApi.createRoleEmployee(data).then((res) => {
    Message.success('添加成功')
    search()
  })
}

// 移除员工
const onRemoveEmployee = (employee) => {
  const data = {
    roleId: props.role!.id,
    employeeId: employee.id,
  }
  RoleApi.removeEmployee(data).then((res) => {
    Message.success('移除成功')
    search()
  })
}

watch(() => props.role, (newRole) => {
  if (!newRole || !newRole.id) {
    return
  }
  queryForm.roleId = props.role!.id
  search()
})
</script>

<template>
  <div>
    <ProTable
      row-key="id"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%' }"
      :pagination="pagination"
      :disabled-tools="['size']"
      :disabled-column-keys="['name']"
      @refresh="search"
    >
      <template #toolbar-left>
        <div>
          <icon-info-circle-fill style="color: rgb(var(--primary-6));" />
          下列员工拥有此角色的所有权限，如果员工存在于多个角色，则该员工将拥有多个角色权限的集合
        </div>
      </template>
      <template #toolbar-right>
        <a-button v-permission="['system:org:manage']" type="primary" @click="onSelectEmployee">
          <template #icon>
            <icon-plus />
          </template>
          <span>添加成员</span>
        </a-button>
      </template>
      <template #name="{ record }">
        <CellAvatar :avatar="getAvatar(record.avatar, record.gender)" :name="record.name" />
      </template>
      <template #gender="{ record }">
        <CellGender :gender="record.gender" />
      </template>
      <template #roleNames="{ record }">
        <CellTags :data="record.roleNames" />
      </template>
      <template #status="{ record }">
        <CellStatus :status="record.status" />
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['system:org:manage']" status="danger" @click="onRemoveEmployee(record)">
            移除
          </a-link>
        </a-space>
      </template>
    </ProTable>
    <EmployeeSelectPanel ref="EmployeeSelectPanelRef" @select="onAddEmployee" />
  </div>
</template>

<style scoped>

</style>
